<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            box-sizing: border-box;
        }

        .main {
            width: 1200px;
            margin: auto;
        }

        .swiper-box {
            position: relative;
            height: 315px;
            width: 564px;
            margin: auto;
            overflow: hidden;
        }

        .swiper-list {
            height: 100%;
            display: flex;
            transition: all 1s;
        }

        .swiper-list>li {
            height: 100%;
            width: 564px;
            background-size: cover;
        }

        .swiper-box>span {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            padding: 5px;
            color: #fff;
            background-color: rgba(123, 123, 123, 0.5);
            cursor: pointer;
        }

        .swiper-box>span:nth-of-type(1) {
            left: 0px;
            border-radius: 0px 50% 50% 0px;
            padding-right: 10px;
        }

        .swiper-box>span:nth-of-type(2) {
            right: 0px;
            border-radius: 50% 0px 0px 50%;
            padding-left: 10px;
        }

        .swiper-nav {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%, 0px);
            background-color: rgba(255, 255, 255, 0.5);
            display: flex;
            justify-content: space-between;
            border-radius: 10px;
            height: 12px;
            padding: 2px;
        }

        .swiper-nav>li {
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
        }

        .swiper-nav>.select-li {
            background-color: #f55;
        }
    </style>
</head>

<body>
    <main class="main">
        <div class="swiper-box">
            <ul class="swiper-list">

            </ul>
            <span onclick="doMove(-1)">&lt;</span>
            <span onclick="doMove(1)">></span>
            <ul class="swiper-nav">

            </ul>
        </div>
        <button onclick="handleLoad()">加载数据</button>
    </main>
</body>
<script>

    // 目前显示的索引
    let index = 0;
    let ul = document.querySelector(".swiper-list");
    let nav = document.querySelector(".swiper-nav");
    let intervalId = null;
    let lis = [];
    let arr = [];

    function handleLoad() {
        let oAjax;
        //如果有XMLHttpRequest，那就是非IE6浏览器。()里面加window的原因下面会有描述。
        if (window.XMLHttpRequest) {
            oAjax = new XMLHttpRequest();//创建ajax对象
        //如果没有XMLHttpRequest，那就是IE6浏览器
        } else {
            //IE6浏览器创建ajax对象
            oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //2.连接服务器
        //open(方法、文件名、异步传输）
        //方法：
        //传输方式是get方式还是post方式。
        //文件名
        //告诉服务器要读哪个文件
        //异步传输
        //异步：多件事一件一件的做
        //同步：多件事情一起进行
        //但是js里面的同步和异步和现实的同步异步相反。
        //同步：多件事一件一件的做
        //异步：多件事情一起进行
        //ajax天生是用来做异步的
        oAjax.open("GET", "http://127.0.0.1:5500/%E8%BD%AE%E6%92%AD%E5%9B%BE/images.json", true);

        //3.发送请求括号内可以传参数
        oAjax.send();

        //4.接收返回
        //客户端和服务器端有交互的时候会调用onreadystatechange
        oAjax.onreadystatechange = function () {
            //oAjax.readyState  //浏览器和服务器，进行到哪一步了。
            //0->（未初始化）：还没有调用 open() 方法。
            //1->（载入）：已调用 send() 方法，正在发送请求。
            //2->载入完成）：send() 方法完成，已收到全部响应内容。
            //3->（解析）：正在解析响应内容。
            //4->（完成）：响应内容解析完成，可以在客户端调用。
            if (oAjax.readyState == 4) {
                // 判断是否成功,如果是200，就代表成功
                if (oAjax.status == 200) {
                    // 获取内容
                    let jsonStr = oAjax.responseText;
                    // 反序列化
                    let obj = JSON.parse(jsonStr);
                    // 获取内容列表
                    arr = obj.result_data;

                    // 设置ul的宽度
                    ul.style.width = `${arr.length * 564}px`;
                    nav.style.width = `${arr.length * 15}px`;

                    lis = arr.map((v, i) => {
                        // 创建图片
                        let li = document.createElement("li");
                        li.style.backgroundImage = `url(${v})`;
                        ul.appendChild(li);

                        // 创建导航小圆点
                        let liNav = document.createElement("li");
                        nav.append(liNav);
                        if (i == 0) {
                            liNav.classList.add("select-li");
                        }

                        return liNav;
                    })

                    intervalId = setInterval(() => doMove(1),3000);
                } else {
                    console.log("失败");
                }
            }
        };
    }

    function doMove(i) {
        if (arr.length == 0) {
            return;
        }
        index += i;
        if (index == arr.length) {
            index = 0;
        } else if (index == -1) {
            index = arr.length - 1;
        }
        ul.style.transform = `translate(${-(index * 564)}px,0px)`;

        lis.forEach((v, i) => {
            if (i == index) {
                v.classList.add("select-li");
            } else {
                v.classList.remove("select-li");
            }
        })
    }

    let swiperBox = document.querySelector(".swiper-box");
    swiperBox.addEventListener("mouseover", () => {
        if (intervalId) {
            clearTimeout(intervalId);
        }
    });

    swiperBox.addEventListener("mouseleave", () => {
        intervalId = setInterval(() => doMove(1), 3000);
    });
</script>

</html>